<template>
       <el-row class="margin-tp custom-table" ref="exportPdf">

            <el-col :span="24" class="transf-title" style="margin-bottom:20px">电子档案移交与接收登记单</el-col>
            <table border="1" cellpadding="0" cellspacing="0" class="orderBorder" >
                <tr>
                    <td>交接工作名称</td>
                    <td colspan="3">
                        <el-input v-model="form.name" placeholder="" :readonly="istype==2?true:false" placeholder="交接工作名称" ></el-input>
                    </td>
                </tr>
                <tr>
                    <td>描述内容</td>
                    <td colspan="3"> <el-input v-model="form.description" placeholder="描述内容" :readonly="istype==2?true:false"></el-input></td>
                </tr>
                <tr>
                    <td>移交电子档案数量</td>
                    <td>
                        <div class="pinput">
                            <el-input placeholder="" style="width:100px" v-model="form.daCount" type="number"
                                oninput="if(value.length>5)value=value.slice(0,5)" :readonly="istype==2?true:false"></el-input>件
                        </div>
                    </td>
                    <td>移交数据容量</td>
                    <td>
                        <div class="pinput"><el-input v-model="form.capacity" placeholder="" style="width:100px"
                                type="text" oninput="if(value.length>10)value=value.slice(0,10)" :readonly="istype==2?true:false"></el-input>
                        </div>
                    </td>

                </tr>
                <tr>
                    <td rowspan="3">移交方式</td>
                    <td colspan="3" style="text-align: left;">
                        <!-- 在线onLine 离线outLine -->
                        <div class="pinput">
                            <el-checkbox false-label='null' :true-label="type.onLine" label="在线" name="onLine"
                                v-model="form.type" style="margin-left:50px" :disabled="istype==2?true:false" @change="onLineTap"></el-checkbox>
                        </div>
                    </td>

                </tr>
                <tr>
                    <td rowspan="2" style="text-align: left;width:150px">
                        <div class="pinput">
                            <el-checkbox false-label='null' :true-label="type.outLine" label="离线" name="outLine"
                                v-model="form.type" style="margin-left:50px" :disabled="istype==2?true:false"></el-checkbox>
                        </div>
                    </td>
                    <td style="width:150px">移交载体类型</td>
                    <td> <el-input v-model="form.carrier" placeholder="移交载体类型" :readonly="istype==2||form.type=='onLine'?true:false"></el-input></td>
                </tr>
                <tr>
                    <td style="width:150px">移交载体数量</td>
                    <td> <el-input v-model="form.carrierCount" placeholder="移交载体数量" :readonly="istype==2||form.type=='onLine'?true:false"></el-input></td>
                </tr>
                <tr>
                    <td style="width:150px">移交电子档案起止年度</td>
                    <td><el-input v-model="form.nd" placeholder="" :readonly="istype==2?true:false"></el-input></td>
                    <td style="width:150px">移交电子档案起止档号</td>
                    <td><el-input v-model="form.dh" placeholder="" :readonly="istype==2?true:false"></el-input></td>
                </tr>
                <tr>
                    <td>检测内容</td>
                    <td colspan="2" style="width:200px">
                        <div class="pinput">
                            <label style="width: 112px;">移交单位：</label><el-input v-model="form.yjUnit" placeholder="（单位全称）"
                            :readonly="istype==2?true:false"></el-input>
                        </div>
                    </td>
                    <td style="width:200px">
                        <div class="pinput"><label style="width: 126px;">接收单位：</label><el-input v-model="form.jsUnit"
                                placeholder="（单位全称）" :readonly="istype==2?true:false"></el-input>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>载体外观检测</td>
                    <td colspan="2">
                        <!-- <el-input v-model="form.appearance" placeholder="" :readonly="istype==2?true:false"></el-input> -->
                        <el-select v-model="form.appearance" placeholder="请选择" :disabled="istype==2?true:false">
                        <el-option label="完好" value="完好"></el-option>
                        <el-option label="破损" value="破损"></el-option>
                        </el-select>
                        </td>
                    <td></td>
                </tr>
                <tr>
                    <td>真实性检测</td>
                    <td colspan="2"><el-input v-model="form.trueExplain" placeholder="" :readonly="istype==2?true:false"></el-input></td>
                    <td></td>
                </tr>
                <tr>
                    <td>完整性检测</td>
                    <td colspan="2"><el-input v-model="form.integrityExplain" placeholder="" :readonly="istype==2?true:false"></el-input></td>
                    <td></td>
                </tr>
                <tr>
                    <td>可用性检测</td>
                    <td colspan="2"><el-input v-model="form.usableExplain" placeholder="" :readonly="istype==2?true:false"></el-input></td>
                    <td></td>
                </tr>
                <tr>
                    <td>安全性检测</td>
                    <td colspan="2"><el-input v-model="form.secureExplain" placeholder="" :readonly="istype==2?true:false"></el-input></td>
                    <td></td>
                </tr>
                <tr>
                    <td>填表人（签名）</td>
                    <td colspan="2">
                        <div class="margin-input">
                            <div style="padding:0;margin:0;text-align: right;width:80%" class="textNSME"><el-input
                                    v-model="form.writtenBy" placeholder="填表人（签名）" :readonly="istype==2?true:false"></el-input></div>
                            <div class="ymd"><el-input v-model="form.writtenTimeYear" placeholder="" type="number"
                                    oninput="if(value.length>4)value=value.slice(0,4)" :readonly="istype==2?true:false"></el-input>年<el-input
                                    v-model="form.writtenTimeMouth" placeholder="" type="number"
                                    oninput="if(value.length>2)value=value.slice(0,2)" :readonly="istype==2?true:false"></el-input>月<el-input
                                    v-model="form.writtenTimeData" placeholder="" type="number"
                                    oninput="if(value.length>2)value=value.slice(0,2)" :readonly="istype==2?true:false"></el-input>日
                            </div>

                        </div>
                    </td>
                    <td>

                    </td>
                </tr>
                <tr>
                    <td>审核人（签名）</td>
                    <td colspan="2">
                        <div class="margin-input">
                            <div style="padding:0;margin:0;text-align: right;width:80%" class="textNSME"><el-input
                                    v-model="form.auditorBy" placeholder="审核人（签名）" :readonly="istype==2?true:false"></el-input></div>

                            <div class="ymd"><el-input v-model="form.auditorTimeYear" placeholder="" type="number"
                                    oninput="if(value.length>4)value=value.slice(0,4)" :readonly="istype==2?true:false"></el-input>年<el-input
                                    v-model="form.auditorTimeMouth" placeholder="" type="number"
                                    oninput="if(value.length>2)value=value.slice(0,2)" :readonly="istype==2?true:false"></el-input>月<el-input
                                    v-model="form.auditorTimeData" placeholder="" type="number"
                                    oninput="if(value.length>2)value=value.slice(0,2)" :readonly="istype==2?true:false"></el-input>日
                            </div>
                        </div>
                    </td>
                    <td>

                    </td>
                </tr>
                <tr>
                    <td>单位印章</td>
                    <td colspan="2">
                        <div class="margin-input">
                            <div style="padding:0;margin:0;text-align: right;width:80%" class="textNSME">
                                <el-input
                                    v-model="form.unitBy" placeholder="单位印章" :readonly="istype==2?true:false" ></el-input></div>
                            <div class="ymd"><el-input v-model="form.unitTimeYear" placeholder="" type="number"
                                    oninput="if(value.length>4)value=value.slice(0,4)" :readonly="istype==2?true:false"></el-input>年<el-input
                                    v-model="form.unitTimeMouth" placeholder="" type="number"
                                    oninput="if(value.length>2)value=value.slice(0,2)" :readonly="istype==2?true:false"></el-input>月<el-input
                                    v-model="form.unitTimeData" placeholder="" type="number"
                                    oninput="if(value.length>2)value=value.slice(0,2)" :readonly="istype==2?true:false"></el-input>日
                            </div>
                        </div>
                    </td>
                    <td>

                    </td>
                </tr>
            </table>

               <div class="transbz">
                    <p>注：本表一式两份，档案移交单位和档案馆各持一份。</p>
                    <!-- <p style="display: flex;" v-if="istype==1">
                        <label style="width:86px">添写说明:</label>
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.illustrate">
                        </el-input>
                    </p> -->
                </div>
        </el-row>
</template>
<script>
export default {
    props:["istype",'form'],
    data(){
        return{

            //在线onLine 离线outLine
            type: {
                onLine: "onLine",
                outLine: "outLine"
            },
        }
    },
    methods:{
        //点击在线 ，情况离线的数据项
        onLineTap(){
            this.form.carrier=undefined;
            this.form.carrierCount=undefined;
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 0 20px 10px !important;
}

.steps-action {
    margin-top: 24px;
}

.printMain {
    display: flex;
    flex-direction: row;
}

::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}



.orderBorder {
    width: 60%;
    margin: 0px auto;
}

.orderBorder td {
    height: 42px;
    line-height: 42px;
    text-align: center;
    border: rgb(42, 41, 41) 1px solid;
}

.transbz {
    width: 60%;
    margin: 0 auto;
}

::v-deep .orderBorder input {
    border: 0 !important;
    width: 100%
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
    -moz-appearance: textfield;
}

.transf-title {
    text-align: center;
    line-height: 55px;
    font-weight: bold;
    font-size: 28px;
}

.ymd {
    padding: 0;
    margin: 0;
    display: flex;
    width: 80%;
    text-align: right;
}

::v-deep .textNSME input {
    text-align: right !important;
}

.pinput {
    display: flex;
    flex-direction: row;
    line-height: 42px;
    align-items: center;
}
table td>div{
    width:-webkit-fill-available!important;
}
</style>
